<template>
  <div class="mood">
    <h2>最近心情</h2>
    <ul>
      <li
        v-for="item in labelList"
        :key="item.id"
      >
        <a
          href="javascript:void(0);"
          @click="clickFn(item)"
        >{{
          delHtmlTag(item.content)
        }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { getArticleList } from '../api/article'
export default {
  data() {
    return {
      arr1: [1, 2, 3, 4, 5, 6, 7],
      labelList: []
    }
  },
  async created() {
    const opt = {
      page: 1,
      per_page: 100,
      channel_id: 2
    }
    const res = await getArticleList(opt)
    this.labelList = res.data.data
  },
  methods: {
    // 去掉html字符串中的所有标签元素
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },
    clickFn(v) {
      this.$router.push({
        path: '/xianyansuiyu',
        query: {
          id: v.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mood {
  border-radius: 8px;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  margin-bottom: 20px;
  background: #fff;
  h2 {
    padding: 20px;
    font-size: 18px;
  }
  ul {
    padding: 0 20px 20px;
    li {
      margin-bottom: 20px;
      border: #e4e4e4 1px solid;
      padding: 10px;
      font-size: 14px;
      border-radius: 5px;
      color: #333;
      position: relative;
      list-style: none;
      a {
        color: #222;
        text-decoration: none;
        overflow: hidden;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 4;
      }
      a:hover {
        color: #fb986e;
      }
    }
    li:after {
      right: 100%;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      border-right-color: #e4e4e4;
      border-width: 10px;
      top: 10px;
    }
    li:nth-child(odd) {
      background: #f5f5f5;
    }
  }
}
</style>
